<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>lesson 13</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // 双向绑定一般都表单元素相关 因为只有这样才有双向
    // input, textarea, checkbox, radio, select
    // 修饰符 lazy, number, trim  lazy修饰符当元素失去焦点即blur时，再去触发 number修饰符将存储的数据转化int型 trim修饰符去掉空格
    const app = Vue.createApp({
      data() {
        return {
          message: "hello",
        };
      },
      template: `
      <div>
        {{message}}
        <input v-model.trim="message"  />
      </div>
    `,
    });

    const vm = app.mount("#root");

    // 选中之后会将数据添加到message的数组中
    const app1 = Vue.createApp({
      data() {
        return {
          message: [],
        };
      },
      template: `
      <div>
        {{message}}
        <input type="checkbox" v-model="message" value="jack"/>
        <input type="checkbox" v-model="message" value="dell"/>
        <input type="checkbox" v-model="message" value="lee"/>
      </div>
    `,
    });

    //选择的时候是item.text即A B C 而传输数据的时候是{value: A}
    const app2 = Vue.createApp({
      data() {
        return {
          message: [],
          options: [
            {
              text: "A",
              value: { value: A },
            },
            {
              text: "B",
              value: { value: B },
            },
            {
              text: "C",
              value: { value: C },
            },
          ],
        };
      },
      template: `
      <div>
        {{message}}
        <select v-model="message" multiple>
          <option v-for="item in options" :value="item.value">{{item.text}}</option>
        </select>
      </div>
    `,
    });
  </script>
</html>
